<template>
  <div class="baseBoxInfoDiv" ref="snsBoxMain" id="smsPrintId">
    <transition name="el-zoom-in-center">
      <div v-show="showSms" class="smsListWrap">
        <div class="title">
          <span class="line"></span>
          <span
            ><i style="font-size: 15px" class="iconfont icon-duanxin"></i>
            {{ $t("wechat.sms") }}({{
              smsList.length == 0 ? 0 : smsList.length
            }})
          </span>
          <!-- <el-button
          style="float: right;margin-left: 10px;margin-right: 10px;margin-top: 6px;color: #2d96e1;"
          type="text"
          @click="openPrintModel"
          ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button > -->
        </div>
        <div class="listInner" style="padding: 0 10px">
          <a-input-search
            :placeholder="$t('wechat.smsSearchTip')"
            v-model="searchWord"
            style="width: 100%; margin-bottom: 10px; float: right"
            @search="onSearchFirst"
          />
          <div class="contentMain" ref="lianxirensms">
            <div
              class="itemSms"
              @click="openSmsItem(item, index)"
              v-for="(item, index) in smsList"
              :key="index"
            >
              <!-- 头像 -->
              <img
                src="../../../../assets/bgPhone/smsuser.png"
                width="60"
                height="60"
                alt=""
              />
              <div style="width: 70%; margin-left: 10px;">
                <div style="font-weight: bold; font-size: 13px">
                  {{ item.name }}({{ item.phone }})
                  <span class="timeSms" style="color: #b2b5b4;">{{
                    formateTime(item.smstime)
                  }}</span>
                </div>
                <div
                  style="
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    color: #b2b5b4;
                    font-size: 13px;
                  "
                >
                  {{ item.content }}
                </div>
              </div>
              <!-- <div style="margin-left: 10px; font-size: 20px">
                <i class="el-icon-arrow-right"></i>
              </div> -->
            </div>
            <div
              class="loadingBoxbottom"
              v-if="showLoading1"
              style="color: #2196f3"
            >
              <i :class="loadClass1" style="color: #2196f3"></i>
              {{ loadingText1 }}
            </div>
          </div>
        </div>

        <a-modal
          width="100%"
          v-model="showRemark"
          :getContainer="getRefsAff"
          :maskClosable="false"
          title="提示"
          @ok="handleOk"
        >
          <p>{{ $t("wechat.biaojibeizhu") }}</p>
          <p><el-input type="textarea" v-model="remark"></el-input></p>
        </a-modal>

        <!-- 查看短信详情 -->
        <a-modal
          v-model="modal2Visible"
          :width="500"
          :footer="null"
          title="user1(13280828937)"
          @ok="() => (modal2Visible = false)"
        >
          <el-button style="" type="text" @click="printPdfSmsContent"
            ><i class="el-icon-printer"></i>
            {{ $t("wechat.dayinSms") }}</el-button
          >
        </a-modal>

        <!--打印窗口 -->
        <a-modal
          width="300px"
          v-model="showPrint"
          :getContainer="getRefsAff"
          :maskClosable="false"
          :title="$t('wechat.dayinyeshu')"
          @ok="printOk"
        >
          <el-radio-group v-model="formResource">
            <el-radio
              label="打印所有短信"
              style="margin-bottom: 10px; font-size: 18px"
            ></el-radio>
            <el-radio
              :label="$t('wechat.selfsmsDy')"
              style="margin-bottom: 10px; font-size: 18px"
            ></el-radio>
            <el-radio
              :label="$t('wechat.selfsmsjietu')"
              style="margin-bottom: 10px; font-size: 18px"
            ></el-radio>
          </el-radio-group>
        </a-modal>
      </div>
    </transition>

    <!-- -------------------------------------------短信内容区域------------------------------------------------------ -->

    <div v-show="!showSms" class="smsDetailWrap">
      <div class="headerSmsContenr">
        <div
          style="width: 20%; font-size: 25px; cursor: pointer"
          :title="$t('wechat.black')"
          @click="goBack()"
        >
          <i class="el-icon-arrow-left"></i>
        </div>
        <div style="width: 60%">
          <div>
            <img
              style="margin: 0 auto; display: block"
              src="../../../../assets/bgPhone/smsuser.png"
              width="50"
              height="50"
              alt=""
            />
          </div>
          <div style="margin: 0 auto; text-align: center">
            {{ userItem.phone }}
          </div>
        </div>
        <el-input
          :placeholder="$t('wechat.enterSearch')"
          v-model="searchWordSms"
          @keyup.enter.native="searchSms(userItem)"
          clearable
        >
        </el-input>
        <el-button
          style="
            float: right;
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 6px;
            color: #2d96e1;
          "
          type="text"
          @click="openPrintModel"
          ><i class="el-icon-printer"></i>
          {{ $t("wechat.dayinSms") }}</el-button
        >
      </div>
      <div class="messageBox" ref="smsMessageRef" id="smsContentId">
        <div v-for="(item, index) in smsContentList" :key="index">
          <!-- right sms -->
          <div v-if="item.issend == 1">
            <div class="time">
              <el-tag size="mini">{{ formateTime(item.smstime) }}</el-tag>
            </div>
            <div :class="item.recover == 1 ? 'leftMessageDel' : 'leftMessage'">
              <img
                class="biaozhuimgLeft"
                v-if="item.mark == 1"
                width="80"
                height="80"
                src="../../../../assets/bizozhu/biaozhu.png"
                alt=""
              />
              <div class="TriangleRight"></div>
              <p style="padding-left: 0px">
                <i class="el-icon-user-solid"></i> {{ item.name }}{{ item.phone
                }}<span v-if="item.recover == 1" style="color: red"
                  >(已删除)</span
                >
              </p>
              <p style="padding-left: 0px">{{ item.content }}</p>
              <div>
                <div class="badgeBox" v-if="item.cntRemark > 0">
                  {{ $t("wechat.remarked") }}
                </div>
                <el-button
                  class="orderBtn"
                  :title="$t('wechat.biaojitishi')"
                  v-else
                  @click="markOrder(item)"
                  type="text"
                  size="mini"
                  style="margin-right: 20px; float: right; color: #fff"
                  icon="el-icon-edit"
                  >{{ $t("wechat.biaoji") }}</el-button
                >
              </div>
              <el-button
                v-if="printShow"
                style="
                  position: absolute;
                  bottom: 0px;
                  right: 20px;
                  color: #fff;
                "
                @click="addPrint(item, $event)"
                type="text"
                >添加</el-button
              >
            </div>
          </div>
          <!-- left sms -->
          <div v-else>
            <div class="time">
              <el-tag size="mini">{{ formateTime(item.smstime) }}</el-tag>
            </div>
            <div
              :class="item.recover == 1 ? 'rightMessageDel' : 'rightMessage'"
            >
              <img
                class="biaozhuimg"
                v-if="item.mark == 1"
                width="80"
                height="80"
                src="../../../../assets/bizozhu/biaozhu.png"
                alt=""
              />
              <div class="Triangle"></div>
              <p>
                <i class="el-icon-user-solid"></i> {{ item.name }}{{ item.phone
                }}<span v-if="item.recover == 1" style="color: red"
                  >(已删除)</span
                >
              </p>
              <p>{{ item.content }}</p>
              <div>
                <div class="badgeBox" v-if="item.cntRemark > 0">
                  {{ $t("wechat.remarked") }}
                </div>
                <el-button
                  class="orderBtn"
                  :title="$t('wechat.biaojitishi')"
                  v-else
                  @click="markOrder(item)"
                  type="text"
                  size="mini"
                  style="margin-right: 20px; float: right; color: #000"
                  icon="el-icon-edit"
                  >{{ $t("wechat.biaoji") }}</el-button
                >
              </div>

              <el-button
                v-if="printShow"
                style="position: absolute; bottom: 0px; right: 20px"
                @click="addPrint(item, $event)"
                type="text"
                >添加</el-button
              >
            </div>
          </div>
        </div>
        <div class="loadingBoxbottom" v-if="showLoading" style="color: #2196f3">
          <i :class="loadClass" style="color: #2196f3"></i> {{ loadingText }}
        </div>
        <div style="float: left; height: 200px"></div>
      </div>
      <a-affix :offset-bottom="50">
        <el-button
          type="primary"
          style=""
          @click="printJson"
          v-if="printShow"
          >{{ $t("wechat.startDaYin") }}</el-button
        >
        <el-button style="" @click="closePrintFunction" v-if="printShow">{{
          $t("wechat.close")
        }}</el-button>
      </a-affix>
    </div>
  </div>
</template>
  <script>
  import print from "print-js";
  import html2canvas from "html2canvas";
  import { getSmsApi, searchWord } from "@/api/baseInfo/base_api";
  import { parseTime } from "@/utils/index";
  import { sendMarkOrderApi } from '@/api/markApi/index'
  import { throttle } from 'lodash';

  import ScreenShort from "js-web-screen-shot";
  export default {
    name: "baseInfo",
    props: ["sendData"],
    data() {
      return {
        scrollTop:0,
        printArray:[],
        printShow:false,
        formResource:'打印所有短信',
        userdata:'',
        loadClass:'el-icon-loading',
        loadingText:'正在加载. . .',
        showLoading:false,

        loadClass1:'el-icon-loading',
        loadingText1:'正在加载. . .',
        showLoading1:false,

        searchWordSms:'',
        userItem:'',
        selectType:0,
        selectTime:'',
        smsID:'',
        isExistsSelectlD:0,
        showSms:true,
        showRemark:false,
        remark:'',
        id:'',
        modal2Visible: false,
        offset: 1,
        limit: 20,
        total: 0,
        total1:0,
        smsList: [],
        searchWord: "",
        type2:[],
        smsContentList:[],
        showPrint:false,
        pageIndexValue:'',
        dynamicTags:[],
      };
    },
    watch: {
      "$store.state.account.sms": function () {
      if(this.sendData.list_offset){
        this.offset=this.sendData.list_offset;
        this.limit=this.sendData.list_limit;

        if(this.sendData.searchKey){
          this.searchWordSms = this.sendData.searchKey;
        }
      }else{
        this.offset=1
      
      }
        this.smsList = []
        this.smsContentList = []
        this.onSearch();
      },
    },
    created() {
      if(this.sendData.list_offset){
        this.offset=this.sendData.list_offset;
        this.limit=this.sendData.list_limit;
        if(this.sendData.searchKey){
          this.searchWordSms = this.sendData.searchKey;
        }
   
      }else{
        this.offset=1
      }
      if(this.sendData.searchkey){
          this.searchWordSms = this.sendData.searchkey;
        }
      this.onSearch();
    },
    methods: {
      closePrintFunction(){
        this.storeArray = [];
        this.printShow = false;
      },
      addPrint(item,event){
      if(event.srcElement.innerHTML == '添加'){
        event.srcElement.innerHTML = '√已添加';
        event.srcElement.style.color = 'red';
        event.srcElement.style.fontWeight = '1000';
        this.printArray.push(item);
      }else{
        event.srcElement.innerHTML = '添加';
        event.srcElement.style.color = '#409EFF';
        event.srcElement.style.fontWeight = '500';
        const index = this.printArray.indexOf(item);
        if (index !== -1) {
          this.printArray.splice(index, 1);
        }
      }
    },
    // 消息列表滑动加载
    throttleFn: throttle(function() {
    // 获取列表元素
    const list = this.$refs.lianxirensms;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
    
        this.showLoading=true;
         
        if(this.smsContentList.length<this.total){
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          let len = this.smsContentList.length;
            this.getSmsContent(this.userItem);
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    },1000),

    // 消息列表滑动加载
    throttleFnSms: throttle(function() {
      // 获取列表元素
      const list = this.$refs.lianxirensms;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {

        this.showLoading1=true;
        if(this.smsList.length<this.total1){
          this.loadClass1 = 'el-icon-loading';
          this.loadingText1 = '正在加载. . .';
          let len = this.smsList.length;
          this.offset++;
          // 加载更多数据
            this.onSearch();
        }else{
          this.loadClass1 = 'el-icon-success';
          this.loadingText1 = '到底了，没有更多了！';
        }
      }
    },1000),
    goBack() {
        this.showSms=true
    },
    openSmsItem(item,index){
      this.smsContentList = []
      this.getSmsContent(item)
      this.userItem = item;
        this.showSms=false;
    },
    searchSms(item){
      this.smsContentList = []
      this.getSmsContent(item)
    },
    getSmsContent(item){
      
      if(sessionStorage.getItem('searchAll')!==null){
        this.searchWordSms = sessionStorage.getItem('searchAll');
        this.smsContentList = [];
      }
      let data = {
          proof_num: this.sendData.proof_num,
          model: this.sendData.model,
          searchkey: this.searchWordSms,
          selectPhone:item.phone,
          limit: this.limit,
          selectType:this.selectType,
          selectTime:this.selectTime,
          smsID:this.smsID,
          isExistsSelectlD:this.isExistsSelectlD
        }
        searchWord(data,'/search/sms_contact_new').then(res=>{
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            this.smsContentList.push(element)
          }
        })
    },
      addPageNumber(){
        if(this.pageIndexValue>(this.smsList[0].cnt)/20){
          this.$message({
            message:`输入页码大于总页码数,请输入小于${Math.ceil((this.smsList[0].cnt)/20)}`,
            type: 'warning'
          });
          return
        }
        if(this.pageIndexValue == '')return;
        if(this.dynamicTags.indexOf(this.pageIndexValue)==-1){
          this.dynamicTags.unshift(this.pageIndexValue);
          this.pageIndexValue = '';
          
        }else{
          this.$message({
              message: '第' + this.pageIndexValue + '页码已存在打印队列中！！',
              type: 'warning'
            });
          this.pageIndexValue = '';
        }
      },
      closeTags(tag){
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      openPrintModel(){
        this.dynamicTags = [];
        this.showPrint = true;
      },
      printOk(){

       

        switch (this.formResource) {
          case '打印所有短信':
          this.printJson();
            break;
          case '手动添加打印短信':
          
          this.scrollTop = this.$refs.smsMessageRef.scrollTop;
            this.printArray = [];
            this.printShow = true;
            this.showPrint = false

            break;
            
          case '对当前可视区域截图':
          this.showPrint = false

          new ScreenShort({
            enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
            loadCrossImg: true, // 跨域
            level: 999999999999999, // 层级
          });

            break;
        
          default:
            break;
        }
 
      },
      async printJson() {

        console.log(this.smsContentList)
        let storeArray = this.smsContentList;
        //通过getdata调用后台接口获取数据封装到res
        if(this.formResource == '手动添加打印短信'){
          this.smsContentList = this.printArray;
          this.smsContentList = this.smsContentList.sort((a, b) => parseInt(b.smstime) - parseInt(a.smstime));

        }
      
        const res = await this.smsContentList;
        let that = this;
        setTimeout(()=>{
          let data = []
        for (let index = 0; index < res.length; index++) {
          const  element = res[index]
              data.push({
                name: element.name,
                phone: element.phone,
                content: element.content,
                smstime:this.formateTime(element.smstime),
                issend:element.issend==1?'发送':'接收',
                recover:element.recover==1?'删除':'正常'
              })
        }
        let that = this;
        let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);

        printJS({
          printable: data,
          properties: [
            
            {
              field: 'name',
              displayName: '联系人姓名',
              columnSize: 1
            },
            {
              field: 'smstime',
              displayName: '时间',
              columnSize: 1
            },
            {
              field: 'phone',
              displayName: '手机号',
              columnSize: 1
            },
            {
              field: 'content',
              displayName: '短信内容',
              columnSize: 1
            },
            
            {
              field: 'recover',
              displayName: '状态',
              columnSize: 1
            },
            {
              field: 'issend',
              displayName: '接收/发送',
              columnSize: 1
            },
      
          ],
          type: 'json',
          header: '通讯录',
          documentTitle:'-',
          headerStyle:'font-size:18px;',
          // 样式设置
          gridStyle: 'border: 1px solid #000;text-algin:center;',
          gridHeaderStyle: 'color:#000;  border: 1px solid #000;',
          onPrintDialogClose: () => {
            clearInterval(focuser);
            that.smsContentList = storeArray;
            that.$refs.smsMessageRef.scrollTop = that.scrollTop;
            that.printShow = false;
          }
        })

        },1000)
  
      },    
      getPrintJsonStr(){
        // this.dynamicTags = []
        let list = []
  
        for (let index = 0; index < this.dynamicTags.length; index++) {
          const element = this.dynamicTags[index];
  
          let data={
              proof_num: this.sendData.proof_num,
              searchkey:this.searchWord,
              model:this.sendData.model,
              offset: Number(element),
              limit: this.limit,
          }
          searchWord(data,'/search/sms').then(res=>{
                let item = {
                  pageIndex:element,
                  list:res.data
                }
                list.push(item);
          })
          
        }
        return list;
  
      },
      getRefsAff(){
        return  this.$refs.snsBoxMain;
      },
      handleOk(){
          let data={
          navigation_list:sessionStorage.getItem('arr').split(','),
          model:this.sendData.model,
          isChat:0,
          app_name:this.userItem.phone,
          account_id:'',
          proof_num:this.sendData.proof_num,
          list_offset:this.offset,
          list_limit:this.limit,
          remark:this.remark,
          class:this.sendData.class,
          label:this.sendData.label,
          contact_username:'',
          id:Number(this.id)
        }
        sendMarkOrderApi(data).then(res=>{
          this.showRemark=false;
          this.$message({
            message: '标记数据成功！',
            type: 'success'
          });
          // this.onSearch()
          this.smsContentList = []
          this.getSmsContent(this.userItem)
        })
      },
      // 添加标记点
      markOrder(item){
        this.id=item.id;
       
        this.showRemark=true;
      },
      checkboxData(){
  
      },
      onSearchFirst() {
        this.smsList = []
        this.offset = 1;
        this.onSearch();
      },
      onSearch() {
        if(sessionStorage.getItem('searchAll')!==null){
          this.searchWord = sessionStorage.getItem('searchAll');
          this.smsList = [];
        }
        let data = {
          proof_num: this.sendData.proof_num,
          // model: this.sendData.model,
          searchkey: this.searchWord,
          offset: this.offset,
          // limit: this.limit,
          // selectType:this.selectType,
          // selectTime:this.selectTime,
          // smsID:this.smsID,
          // isExistsSelectlD:this.isExistsSelectlD
        };
        searchWord(data, "/search/sms_new").then((res) => {
          for (let index = 0; index < res.data.length; index++) {
            const element = res.data[index];
            this.smsList.push(element);
          }
          this.total1 = res.data[0].cnt;
          if(this.sendData.list_offset){
            for (let index = 0; index < this.smsList.length; index++) {
              
            const element = this.smsList[index];
            if(element.phone == this.sendData.app_name){
              this.openSmsItem(element,index)
            }
            
          }
          }
          
        });
      },
      // 格式化时间
      formateTime(date) {
        return parseTime(date);
      },
      printPdfSmsContent() {
        html2canvas(document.getElementById("smsContentId")).then(function (
          canvas
        ) {
          var imgageData = canvas.toDataURL("image/png"); //把canvas转为base64图片
          // let dom = that.$refs.smsMessageRef;
          // dom.style.height = "auto";
          // dom.style['overflow-y']="visible"
          print(imgageData, "image");
        });
      },
      //打印
      printPdf() {
        html2canvas(document.getElementById("smsPrintId")).then(function (
          canvas
        ) {
          var imgageData = canvas.toDataURL("image/png"); //把canvas转为base64图片
          print(imgageData, "image");
        });
      },
      viewsSms(row) {
        this.modal2Visible = true;
      },
      handleSizeChange(val) {
        this.limit = val;
        this.onSearch();
        this.$refs.smsMessageRef.scrollTop = 0;
      },
      handleCurrentChange(val) {
        this.offset = val;
        this.onSearch();
        this.$refs.smsMessageRef.scrollTop = 0;
      },
    },
  };
  </script>
  

<style scoped>
.loadingBoxbottom {
  text-align: center;
  width: 100%;
}
.headerSmsContenr {
  display: flex;
  align-items: center;
  height: 80px;
  margin-top: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
  padding: 0 20px;
}
.timeSms {
  position: absolute;
  top: 7px;
  right: 10px;
  font-size: 12px;
}
.itemSms {
  position: relative;
  height: 80px;
  width: 100%;
  border-bottom: 1px solid rgb(228, 228, 228);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.itemSms:hover {
  background: #eeeeee;
}
.orderBtn {
  position: absolute;
  top: 0px;
  right: 0px;
}
.orderBtn:hover {
  font-weight: bold !important;
  color: rgb(4, 92, 206) !important;
}
.badgeBox {
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  position: absolute;
  font-size: 12px;
  top: -10px;
  right: -10px;
}
.biaozhuimg {
  position: absolute;
  right: -10px;
  transform: rotate(45deg);
  top: -10px;
}
.biaozhuimgLeft {
  position: absolute;
  left: -10px;
  transform: rotate(-45deg);
  top: -10px;
}

.contentMain {
  width: 100%;
  min-width: 300px;
  height: auto;
  max-height: 100%;
  padding-bottom: 20px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;            /* 固定滚动槽，减少布局抖动 */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #c0c0c0 rgb(252, 252, 252); /* Firefox 颜色 */
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain; /* 阻止滚动链到整页 */
  display: flex;
  flex-direction: column;
}
.contentMain::-webkit-scrollbar {
  width: 10px;
}
.contentMain::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.contentMain::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.Triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid rgb(219, 219, 219);
  border-right: 20px solid transparent;
  transform: rotateZ(45deg);
  left: -10px;
  top: 10px;
}
.TriangleRight {
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 20px solid rgb(23, 192, 94);
  border-right: 20px solid transparent;
  transform: rotateZ(-135deg);
  right: -9px;
  top: 10px;
}
.closeBox {
  position: absolute;
  font-size: 0.1rem;
  right: 10px;
  top: -15px;
  cursor: pointer;
  transition: 0.1s linear;
}
.closeBox:hover {
  transition: 0.1s linear;
  transform: rotateZ(90deg);
  color: #fff;
}
.topTitle {
  display: flex;
  height: 80px;
  background: #ccc;
  line-height: 80px;
  padding: 0 0.85rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.messageBox {
  width: 100%;
  /* height: calc(100% - 80px); 由flex:1接管高度以避免溢出 */
  box-sizing: border-box;
  padding: 20px;
  max-height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;            /* 固定滚动槽 */
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: #bbbbbb rgb(255, 255, 255); /* Firefox 颜色 */
  padding-bottom: 100px;
  flex: 1;
  min-height: 0;
  overscroll-behavior: contain; /* 阻止滚动链到整页 */
  display: flex;
  flex-direction: column;
}

.messageBox::-webkit-scrollbar {
  width: 8px;
}
.messageBox::-webkit-scrollbar-track {
  background-color: rgb(255, 255, 255);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.messageBox::-webkit-scrollbar-thumb {
  background-color: #bbbbbb;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.smsMain {
  position: absolute;
  width: 80%;
  height: 80%;
  min-width: 300px;
  min-height: 400px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.rightMessage {
  position: relative;
  font-size: 14px;
  float: left;
  color: rgb(51, 51, 51);
  width: 70%;
  padding: 15px;
  min-height: 50px;
  background: rgb(219, 219, 219);
  padding: 6px;
  border-radius: 4px;
  word-wrap: break-word;
  margin-bottom: 20px;
}
.rightMessageDel {
  position: relative;
  font-size: 14px;
  float: left;
  color: red;
  width: 70%;
  padding: 15px;
  min-height: 50px;
  background: rgb(219, 219, 219);
  padding: 6px;
  border-radius: 4px;
  word-wrap: break-word;
  margin-bottom: 20px;
}
.leftMessage {
  position: relative;
  font-size: 14px;
  float: right;
  color: #fff;
  width: 70%;
  padding: 15px;
  min-height: 50px;
  background: rgb(23, 192, 94);
  padding: 6px;
  border-radius: 4px;
  word-wrap: break-word;
  margin-bottom: 20px;
}
.leftMessageDel {
  position: relative;
  font-size: 14px;
  float: right;
  color: red;
  width: 70%;
  padding: 15px;
  min-height: 50px;
  background: rgb(23, 192, 94);
  padding: 6px;
  border-radius: 4px;
  word-wrap: break-word;
  margin-bottom: 20px;
}
.time {
  width: 100%;
  float: left;
  font-size: 13px;
  text-align: center;
  margin-bottom: 10px;
}
.baseBoxInfoDiv {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
   overflow: hidden;
  min-height: 0;
}

.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
.block {
  text-align: center;
  margin-top: 10px;
}

/* 列表视图内部包裹：让contentMain占满并滚动 */

.listInner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible; /* 允许子滚动条显示 */
}

/* header固定高，messageBox用flex填充并滚动，已在样式中有overflow-y:auto */
.headerSmsContenr {
  flex: 0 0 auto;
}
.messageBox {
  flex: 1 1 auto; /* 用flex替代calc高度 */
  min-height: 0;  /* 关键 */
}

/* 关键外层：让两个视图容器可伸缩，子滚动容器才能生效 */
.smsListWrap,
.smsDetailWrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;    /* 允许子元素按容器高度收缩 */
  overflow: hidden; /* 不滚动整个视图容器，只滚动内部区域 */
}

/* 为确保滚动明显，可选开启滚动条总是显示（如需要可取消注释） */
/*
.contentMain { overflow-y: scroll; }
.messageBox { overflow-y: scroll; }
*/

</style>
